<template>
    <div class="container">
        <h2 class="text-xl font-medium mb-6">高危自评</h2>
        <el-steps :active="currentStep" finish-status="success" class="mb-8">
            <el-step v-for="(step, index) in assessmentSteps" :key="index" :title="step" />
        </el-steps>

        <div class="assessment-content">
            <div v-if="currentStep === 0">
                <h3 class="text-lg font-medium mb-4">基础信息评估</h3>
                <el-form :model="assessmentForm" label-width="120px">
                    <el-form-item label="年龄">
                        <el-input v-model="assessmentForm.age" class="!rounded-button" />
                    </el-form-item>
                    <el-form-item label="孕周">
                        <el-input v-model="assessmentForm.gestationalWeek" class="!rounded-button" />
                    </el-form-item>
                </el-form>
            </div>

            <div v-if="currentStep === 1">
                <h3 class="text-lg font-medium mb-4">风险因素评估</h3>
                <el-checkbox-group v-model="assessmentForm.riskFactors">
                    <!-- <div class="grid grid-cols-2 gap-4"> -->
                        <el-checkbox v-for="factor in riskFactors" :key="factor.id" :label="factor.id">
                            {{ factor.name }}
                        </el-checkbox>
                    <!-- </div> -->
                </el-checkbox-group>
            </div>

            <div v-if="currentStep === 2">
                <h3 class="text-lg font-medium mb-4">评估结果</h3>
                <div class="p-6 bg-blue-50 rounded-lg">
                    <div class="text-center">
                        <el-icon class="text-4xl text-blue-500 mb-4">
                            <Warning />
                        </el-icon>
                        <div class="text-xl font-medium text-blue-700">评估等级：中度风险</div>
                        <div class="mt-4 text-blue-600">建议及时就医进行专业评估</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-between mt-8">
            <el-button v-if="currentStep > 0" @click="currentStep--" class="!rounded-button">
                上一步
            </el-button>
            <el-button v-if="currentStep < assessmentSteps.length - 1" type="primary" @click="currentStep++"
                class="!rounded-button">
                下一步
            </el-button>
        </div>

    </div>
</template>

<script setup>
import {ref} from 'vue'
// 高危自评相关数据
const currentStep = ref(0);
const assessmentSteps = ['基础信息', '风险评估', '评估结果'];
const assessmentForm = ref({
    age: '',
    gestationalWeek: '',
    riskFactors: []
});

const riskFactors = [
    { id: 1, name: '高龄孕妇' },
    { id: 2, name: '妊娠期高血压' },
    { id: 3, name: '妊娠期糖尿病' },
    { id: 4, name: '多胎妊娠' }
];
</script >
<style lang="less" scoped>
</style>